<template>
    <div class="login">
      <div class="dian"><img src="../assets/头部.png"></div>
      <div class="login-wrapper">
         <div class="img"><img src="../assets/编组@2x.png"></div>
         <div class="login-input">
            <p><input type="number" placeholder="请输入手机号" name="username"></p>
            <p><input type="password" placeholder="请输入密码" name="password"></p>
            <p><input type="password" placeholder="确认密码" name="password"></p>
            <p><div class="button">注册</div></p>
            <p class="login-p">
                <span class="login-span" @click="Login">已有账号去登陆</span>
            </p>
         </div>
       </div>
    </div>
</template>
<script>
export default {
    methods:{
    Login(){
      console.log("跳转至登录页面")
      this.$router.push('/Login')
    }
  }
}
</script>
<style lang="css" scoped>
.dian{
  width: 100%;
  height: 5vw;
  top: 0;
}
.dian img{
  width: 100%;
  height: 5vw;
}
.login{
    width: 100%;
    height: 100%;
}
.login-wrapper{
    width: 80vw;
    height: 100vw;
    margin: 20vw auto 0 auto;
}
.img{
     width: 20vw;
    height: 20vw;
    border-radius: 50%;
    margin: 0 auto 10vw auto;
}
.img img{
     width: 20vw;
    height: 20vw;
    border-radius: 50%;
}
.login-input input{
    width: 79vw;
    height: 14vw;
    margin-top: 2vw;
    border: 1px solid #8080804a;
    border-radius: 2vw;
    background-color: #80808008;
    font-size: 5vw;
}
.button{
    width: 80vw;
    height: 14vw;
    margin-top: 3vw;
    background-color: #36a8f3cc;
    color: white;
    font-size: 5vw;
     border-radius: 2vw;
    text-align: center;
    line-height: 14vw;
}
.login-span{
    margin-left: 20vw;
}
</style>